<script setup lang="ts">
    import Main from '@/views/Main/index.vue';
    import CommentRelease from '@/components/CommentBox/Release/index.vue';
    import CommentList from '@/components/CommentBox/List/index.vue';
    import RecommendTab from '@/views/Sidebar/components/Recommend/index.vue';
    import LastCommentTab from '@/views/Sidebar/components/LastComment/index.vue';

    import { ref, reactive, onMounted } from 'vue';
    import type { LinkItem } from '@/services/type';
    import { api } from '@/services/api';
    import { CommentWayEnum } from '@/enums';
    
    // 友情链接列表信息
    var liskData = reactive<LinkItem[]>([]);
    // 初始化正在加载中
    const loading = ref(true);

    onMounted(async () => {
        // 获取友情链接列表信息
        const response = await api.common.getLinkList()
        // 如果状态返回失败
        if(response.code !== 0) return; 
        // 结果赋值
        liskData.push(...response.data);
        // 加载结束
        loading.value = false;
    });
</script>
<template>
    <Main>
        <template #navigation>
            <div class="leave_position">
                <svg-icon href='#icon-position' width="13px" height="13px"></svg-icon>
                &nbsp;您现在的位置是：
                <router-link style="color: black;font-size: 14px;" to="/">
                    首页
                </router-link>
                <label>&nbsp;>&nbsp;</label>
                <router-link style="color: black;font-size: 14px;" to="/news">
                    友情链接
                </router-link>
            </div>
        </template>
        <template #leftColumn>
            <section class="sideTab">
                <div class="sideTab-title">
                    友链要求
                </div>
                <ul class="tj" style="margin-left: 10px;margin-top: 20px">
                    <li style="height: 50px;"><span style="font-size: 16px">1.网站必须是属于自己的博客，并且能够稳定更新文章。 </span></li>
                    <li style="height: 50px;"><span style="font-size: 16px">2.网站必须能够正常访问，不能时不时宕机或者连接不上。  </span></li>
                    <li style="height: 50px;"><span style="font-size: 16px">3.网站必须内容健康，不能有内容污秽不堪、色情暴力的内容。  </span></li>
                    <li style="height: 50px;">
                        <span style="font-size: 16px">4.在申请友链后，在24小时内，必须挂上本站站点。  </span>
                    </li>
                    <li style="height: 50px;">
                        <label style="font-size: 16px;color: red;font-weight: bold">注意：</label>
                        <span style="font-size: 16px;font-weight: bold">本站定期会回访贵站，如发现无法访问等情况，将会撤下链接。</span>
                    </li>
                </ul>
            </section>
            <section class="sideTab">
                <div class="sideTab-title">
                    友链申请规范
                </div>
                <div class="specification">
                    <p>网站名称：羅氏博客</p>
                    <p>网站网址：http://www.lylblog.com.cn</p>
                    <p>网站ico：http://www.lylblog.com.cn/f.ico</p>
                    <p>网站简介：一个分享编程知识与记录生活的个人博客网站</p>
                </div>
            </section>
            <section class="sideTab">
                <div class="field">
                    <div class="friendlink">
                        <div class="sideTab-title">
                            友情申请链接
                        </div>
                        <ul class="links_ul">
                            <li v-for="(item, index) in liskData" :key="index">
                                <a :href="item.url" :target="item.target" :title="item.describe">
                                    <img :src="item.icon"/>
                                    {{item.title}}
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </section>
            <!-- 评论发布 -->
            <comment-release title="发表评论" :type="CommentWayEnum.LINKS" withHeader />
            <!-- 评论列表 -->
            <comment-list :type="CommentWayEnum.LINKS" />
        </template>
        <template #rightColumn>
            <!-- 站长推荐 -->
            <recommend-tab />
            <!-- 最新评论 -->
            <last-comment-tab />
        </template>
    </Main>
</template>
<!-- 引入样式文件 -->
<style lang="less" src="./style.less" scoped />